<template>
  <h3>actions</h3>
  <div>age: {{ age }} - <button @click="fn">async age++</button></div>
</template>

<script>
import { mapState, mapActions } from "vuex";

export default {
  computed: mapState(["age"]),
  methods: {
    fn() {
      // 通过dispatch的方法来调用仓库的actions的函数
      // this.$store.dispatch("asyncAgeAdd", { n: 4 });
      this.asyncAgeAdd({ n: 4 });
    },
    ...mapActions(["asyncAgeAdd"]),
  },
};
</script>
